﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

                       function LimitBox(elementId, threshold, outputId) {
                           this.elementId = elementId;
                           this.threshold = threshold;
                           this.outputId = outputId;
                           this.messageOut = "{0} out of {1}";
                           this.init();
                       }

                       LimitBox.prototype.init = function () {
                           var ref = this;
                           var elem = document.getElementById(this.elementId);
                           elem.onkeypress = function () { ref.check(); };
                           elem.onkeyup = function () { ref.check(); };
                           elem.onchange = function () { ref.check(); };
                           elem.onkeydown = function (e) { return ref.cutOff(e); }
                           elem = null;
                           this.updateMessage();
                       }

                       LimitBox.prototype.check = function () {
                           var elem = document.getElementById(this.elementId);
                           if (elem.value.length > this.threshold) elem.value = elem.value.substring(0, this.threshold);
                           elem = null;
                           this.updateMessage();
                       }

                       LimitBox.prototype.cutOff = function (e) {
                           var evt = (e) ? e : event;
                           var isShort = (document.getElementById(this.elementId).value.length < this.threshold);
                           if (isShort || evt.keyCode == 8 || evt.keyCode == 9 || evt.keyCode == 13 || evt.keyCode == 46) return true;
                           else return false;
                       }

                       LimitBox.prototype.updateMessage = function () {
                           var elem = document.getElementById(this.elementId);
                           var output = document.getElementById(this.outputId);
                           output.innerHTML = this.messageOut.Format(elem.value.length, this.threshold);
                           elem = null;
                           output = null;
                       }

                       String.prototype.Format = function () {
                           var str = this;
                           for (var i = 0; i < arguments.length; i++) {
                               str = str.replace("{" + i + "}", arguments[i]);
                           }
                           return str;
                       }


    </script>

      <script type="text/javascript">
          //register onload
          window.onload = function () {
              var tb2 = new LimitBox("tb2", 3, "sp2");
          }
      </script>

  </head>
  <body>
    <form id="form1">
      <h3>Text Box Character Count/Limit</h3>
      <input type="text" id="tb1"><span id="sp1"></span>
      <br/>
      <input type="text" id="tb2"><span id="sp2"></span>
      <script type="text/javascript">
          //register inline
          var tb1 = new LimitBox("tb1", 10, "sp1");
          var tb2 = new LimitBox("tb2", 3, "sp2");
      </script>
        <br/><br/>
        <h4>Basic Directions:</h4>
          <ul>
            <li>Put script on page!</li>
            <li>Register the script with the element: <em>var tb1 = new LimitBox("Textbox Id", number of characters ,"Output Element Id");</em></li>
              <ul>
                <li>Need to register the element after it has been rendered [insert script after element)</li>
                <li>Or register it during window.onload</li>
              </ul>
            <li>View the source for code and examples for registering with the textbox with both methods</li>
          </ul>
        <h4>Flaws:</h4>
          <ul>
	    <li>If you highlight text when limit is reached, you can not type to delete with keys other than delete or backspace</li>
            <li>A lot of code!</li>
          </ul>
    </form>
  </body>
</html>